<template>
  <div>
    <el-card>
      <CategorySelector @changeCategory="changeCategory" :isShowList="isShowList"></CategorySelector>
    </el-card>
    <el-card style="margin-top:20px">
      <div v-show="!isShowSpuForm && !isShowSkuForm">
        <el-button type="primary" icon="el-icon-plus" @click="showAddSpuForm">添加SPU</el-button>
        <el-table style="width: 100%" :data="spuList" border>
          <el-table-column type="index" align="center" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <HintButton type="success" icon="el-icon-plus" size="mini" title="添加SKU" @click="showAddSkuForm(row)"></HintButton>
              <HintButton type="warning" icon="el-icon-edit" size="mini" title="修改SPU" @click="showUpdateSpuForm(row)"></HintButton>
              <HintButton type="info" icon="el-icon-info" size="mini" title="查看SKU列表" @click="showSkuList(row)"></HintButton>
              <el-popconfirm :title="`确定删除${row.spuName}吗`" @onConfirm="deleteSpu(row)">
                <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除SPU" slot="reference"></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center" @size-change="handleSizeChange" @current-change="getSpuList" :current-page="page" :page-sizes="[2, 3, 5]" :page-size="limit" layout="prev, pager, next, jumper, ->, sizes, total" :total="total">
        </el-pagination>
      </div>
      <!-- 添加和修改 Spu 的页面组件 -->
      <SpuForm v-show="isShowSpuForm" ref="spuForm" :visible.sync="isShowSpuForm" @successBack="successBack" @cancelBack="cancelBack"></SpuForm>
      <!-- 添加 Sku 的页面组件 -->
      <SkuForm v-show="isShowSkuForm" ref="skuForm" :visible.sync="isShowSkuForm"></SkuForm>
      <!-- 点击查看 Sku 列表对话框 -->
      <el-dialog :title="`${spu.spuName}`" :before-close="resetSkuList" :visible.sync="dialogTableVisible">
        <el-table :data="skuList" border v-loading="loading">
          <el-table-column prop="skuName" label="名称" width="150"></el-table-column>
          <el-table-column prop="price" label="价格(元)" width="200"></el-table-column>
          <el-table-column prop="weight" label="重量(KG)"></el-table-column>
          <el-table-column prop="name" label="默认图片" width="200">
            <template slot-scope="{row, $index}">
              <img :src="row.skuDefaultImg" alt="" style="width: 60px; height: 80px" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

import SpuForm from '@/views/product/components/SpuForm'
import SkuForm from '@/views/product/components/SkuForm'
export default {
  name: 'Spu',
  components: {
    SpuForm,
    SkuForm
  },
  data () {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 控制三级分类可操作性
      isShowList: true,
      page: 1,
      limit: 3,
      spuList: [],
      total: 0,

      // isShowSpuForm 和 isShowSkuForm 控制切换三个页面
      isShowSpuForm: false,
      isShowSkuForm: false,

      // dialog 显示和隐藏
      dialogTableVisible: false,
      spu: {},
      skuList: [],
      loading: false
    }
  },
  methods: {
    changeCategory ({ categoryId, level }) {
      if (level === 1) {
        this.category1Id = categoryId

        this.category2Id = ''
        this.category3Id = ''
        this.spuList = []
      } else if (level === 2) {
        this.category2Id = categoryId

        this.category3Id = ''
        this.spuList = []
      } else if (level === 3) {
        this.category3Id = categoryId
        this.getSpuList()
      }
    },
    // 获取 SPU 分页列表 
    async getSpuList (pager = 1) {
      this.page = pager
      const { page, limit, category3Id } = this

      const result = await this.$API.spu.getList(page, limit, category3Id)
      if (result.code === 200) {
        this.spuList = result.data.records
        this.total = result.data.total
      }
    },
    handleSizeChange (size) {
      this.limit = size
      this.getSpuList()
    },
    // 点击添加 SPU 按钮
    showAddSpuForm () {
      this.isShowSpuForm = true
      this.$refs.spuForm.initAddSpuFormData(this.category3Id)
    },
    // 点击修改 SPU 按钮
    showUpdateSpuForm (row) {
      this.flag = row.id
      this.isShowSpuForm = true
      // 可以通过 $refs 获取到子组件对象,并使用子组件对象当中的数据和方法
      this.$refs.spuForm.initUpdateSpuFormData(row)
    },
    // 点击添加 SKU 按钮
    showAddSkuForm (row) {
      this.isShowSkuForm = true
      this.$refs.skuForm.initAddSkuFormData(row, this.category1Id, this.category2Id)
    },
    // 重新获取数据
    successBack () {
      // 根据 flag 判定是添加成功返回的还是修改成功返回的
      if (this.flag) {
        // 修改成功返回的(返回当前页)
        this.getSpuList(this.page)
      } else {
        // 添加成功返回的(返回首页)
        this.getSpuList()
      }
      // 清空标识数据
      this.flag = null
    },
    cancelBack () {
      this.flag = null
    },
    // 删除 SPU
    async deleteSpu (row) {
      try {
        await this.$API.spu.remove(row.id)
        this.$message.success('删除成功')
        // 重新获取列表数据
        this.getSpuList(this.spuList > 1 ? this.page : this.page - 1)
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 点击查看 Sku 列表
    async showSkuList (row) {
      // 弹出对话框
      this.dialogTableVisible = true
      this.spu = row

      // 发请求获取 sku 列表
      this.loading = true
      const result = await this.$API.sku.getListBySpuId(row.id)
      if (result.code === 200) {
        this.skuList = result.data
      }
      this.loading = false
    },
    // 关闭 dialog 之前的回调
    resetSkuList (done) {
      this.skuList = []
      done()
    },
  },
  // 三级分类联动的可操作性
  watch: {
    isShowSpuForm (newVal, oldVal) {
      this.isShowList = !newVal
    },
    isShowSkuForm (newVal, oldVal) {
      this.isShowList = !newVal
    }
  }
}
</script>

<style lange="scss" scoped>
</style>